<template>
    <div class="region region--primary">
        <div class="layout">
            <div class="component component--module tickers-marketdatatablevertical"
                v-for="(item, index) in threeTableData" :key="index">
                <div class="column column--full">
                    <div class="element element--ticker">
                        <header class="header header--secondary">
                            <h2 class="title">
                                <span class="label"><a>{{ item.title }}</a></span>
                            </h2>
                        </header>
                        <div class="tickers-marketdatatable">
                            <table class="table">
                                <thead class="table__head">
                                    <tr class="table__row">
                                        <th class="table__heading">Name</th>
                                        <th class="table__heading">Last</th>
                                        <th class="table__heading">Chg</th>
                                        <th class="table__heading">Chg %</th>
                                    </tr>
                                </thead>
                                <tbody class="table__body">
                                    <tr class="table__row">
                                        <td class="table__cell w55 ticker-positive">
                                            <a class="link"> FTSE 100></a>
                                        </td>
                                        <td class="table__cell w15"><bg-quote
                                                class="ignore-color positive">8,467.30</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote>39.17</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">0.46%</bg-quote></td>
                                    </tr>
                                    <tr class="table__row">
                                        <td class="table__cell no-ticker" colspan="4">
                                            <div class="tbchart"></div>
                                        </td>
                                    </tr>
                                    <tr class="table__row">
                                        <td class="table__cell w55 ticker-positive"><a class="link">DAX</a></td>
                                        <td class="table__cell w15"><bg-quote
                                                class="ignore-color positive">18,794.40</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">77.98</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">0.42%</bg-quote></td>
                                    </tr>
                                    <tr class="table__row">
                                        <td class="table__cell w55 ticker-negative"><a class="link">CAC 40</a></td>
                                        <td class="table__cell w15"><bg-quote
                                                class="ignore-color negative">8,216.64</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="negative">-9.16</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="negative">-0.11%</bg-quote></td>
                                    </tr>
                                    <tr class="table__row">
                                        <td class="table__cell w55 ticker-positive"><a class="link">FTSE MIB</a></td>
                                        <td class="table__cell w15"><bg-quote
                                                class="ignore-color positive">35,293.97</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">142.55</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">0.41%</bg-quote></td>
                                    </tr>
                                    <tr class="table__row">
                                        <td class="table__cell w55 ticker-positive"><a class="link">IBEX 35</a></td>
                                        <td class="table__cell w15"><bg-quote
                                                class="ignore-color positive">11,268.80</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">29.50</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">0.26%</bg-quote></td>
                                    </tr>
                                    <tr class="table__row">
                                        <td class="table__cell w55 ticker-positive"><a class="link">SXXP</a></td>
                                        <td class="table__cell w15"><bg-quote
                                                class="ignore-color positive">523.25</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">1.60</bg-quote></td>
                                        <td class="table__cell w15"><bg-quote class="positive">0.31%</bg-quote></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="ticker__button">
                            <a class="btn btn--outline">Show
                                More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { usemkDataArrays } from '../../../api/market';
const { threeTableData } = usemkDataArrays()
// 数据还要处理优化
</script>
<style scoped lang='scss'>
.element--tableblock tr,
.table__row {
    border-bottom: 1px solid #e1e1e1;
}
</style>